<h1>动画</h1>
<style>
    #a_ul li{
        float: left;
        padding: 5px 10px;
        margin-right: 10px;
        margin-bottom: 5px;
        border:solid 1px #eee;
        line-height: 24px;
        color:#fff;
        background-color: #DD4A68;
    }
</style>
<div style="padding:100px 0; text-align: center;overflow:hidden;font-size: 40px;color:deepskyblue;">
    <span id="animate">动画效果预览</span>
</div>
<ul id="a_ul" class="clearfix">
    <li>bounce</li>
    <li>flash</li>
    <li>pulse</li>
    <li>rubberBand</li>
    <li>headShake</li>
    <li>swing</li>
    <li>tada</li>
    <li>wobble</li>
    <li>jello</li>
    <li>bounceIn</li>
    <li>bounceInDown</li>
    <li>bounceInLeft</li>
    <li>bounceInRight</li>
    <li>bounceInUp</li>
    <li>bounceOut</li>
    <li>bounceOutDown</li>
    <li>bounceOutLeft</li>
    <li>bounceOutRight</li>
    <li>bounceOutUp</li>
    <li>fadeIn</li>
    <li>fadeInDown</li>
    <li>fadeInDownBig</li>
    <li>fadeInLeft</li>
    <li>fadeInLeftBig</li>
    <li>fadeInRight</li>
    <li>fadeInRightBig</li>
    <li>fadeInUp</li>
    <li>fadeInUpBig</li>
    <li>fadeOut</li>
    <li>fadeOutDown</li>
    <li>fadeOutDownBig</li>
    <li>fadeOutLeft</li>
    <li>fadeOutLeftBig</li>
    <li>fadeOutRight</li>
    <li>fadeOutRightBig</li>
    <li>fadeOutUp</li>
    <li>fadeOutUpBig</li>
    <li>flip</li>
    <li>flipInX</li>
    <li>flipInY</li>
    <li>flipOutX</li>
    <li>flipOutY</li>
    <li>lightSpeedIn</li>
    <li>lightSpeedOut</li>
    <li>rotateIn</li>
    <li>rotateInDownLeft</li>
    <li>rotateInDownRight</li>
    <li>rotateInUpLeft</li>
    <li>rotateInUpRight</li>
    <li>rotateOut</li>
    <li>rotateOutDownLeft</li>
    <li>rotateOutDownRight</li>
    <li>rotateOutUpLeft</li>
    <li>rotateOutUpRight</li>
    <li>hinge</li>
    <li>rollIn</li>
    <li>rollOut</li>
    <li>zoomIn</li>
    <li>zoomInDown</li>
    <li>zoomInLeft</li>
    <li>zoomInRight</li>
    <li>zoomInUp</li>
    <li>zoomOut</li>
    <li>zoomOutDown</li>
    <li>zoomOutLeft</li>
    <li>zoomOutRight</li>
    <li>zoomOutUp</li>
    <li>slideInDown</li>
    <li>slideInLeft</li>
    <li>slideInRight</li>
    <li>slideInUp</li>
    <li>slideOutDown</li>
    <li>slideOutLeft</li>
    <li>slideOutRight</li>
    <li>slideOutUp</li>
    <li>slideOutUp</li>
</ul>

<script>
    (function(){
    	var target = document.querySelector("#animate");
        var li = document.querySelector("#a_ul")
            .querySelectorAll("li");

        [].forEach.call(li, function(ele){
			ele.addEventListener("click", function(){
				target.setAttribute("class","animated " + this.textContent);
				target.style.display = "none";
				target.style.display = "block";
			});
        });

        target.addEventListener("animationend", function(){
        	this.className = "";
        });
    })();
</script>